<template>
	<view>
		<view class="head">
			<view class="navigation-bar">
				<view @click="turnBack">
					<image src="/static/左箭头.png"></image>
				</view><text>洗车</text>
			</view>
		</view>
		<view class="background"></view>
		<view class="pictureDisplay">
			<image src=""></image>
			<view>大美汽车保养厂(解放路店)</view>
			<view class="score" v-if="score > 0">
				<uni-rate size="15" :value="score" />
								<text>{{ score }}分</text><text>销量：556</text>
			</view>
			<view class="score" v-else>
				<view>暂无评分</view>
			</view>
			<view>营业时间:周一至周五<text>早上8:00-晚上22:00</text></view>
			<view>位置:山阳区人民路与解放路交叉口<view @click="navigation">
					<image src="/static/plane.png"></image>
				</view>
			</view>
		</view>
		<view class="serviceItems">
			<view>服务项目</view>
			<view class="project">
				<view>
					<view>
						<radio><text class="project2">小保养套餐（合成机油+机滤）</text></radio>
					</view>
					<view class="money">￥35.9<text>￥60</text></view>
				</view>
				<view>这里是惊喜服务的详细介绍,这里是惊喜服务的详细介绍,这里是惊喜服务的详细介绍.</view>
			</view>
		</view>
		<view class="serviceEvaluation">
			<view>服务评价</view>
			<view class="evaluate">
				<view class="img">
					<image></image>
				</view>
				<view class="details">
					<view class="name">
						<view>黄**</view>
						<view>2012-12-31</view>
					</view>
					<view class="star">
						<uni-rate size="15" :value="5" />
					</view>
					<view class="content">
						洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！
					</view>
				</view>
			</view>
			<view class="evaluate">
				<view class="img">
					<image></image>
				</view>
				<view class="details">
					<view class="name">
						<view>黄**</view>
						<view>2012-12-31</view>
					</view>
					<view class="star">
						<uni-rate size="15" :value="5" />
					</view>
					<view class="content">
						洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！
					</view>
				</view>
			</view>
			<view class="evaluate">
				<view class="img">
					<image></image>
				</view>
				<view class="details">
					<view class="name">
						<view>黄**</view>
						<view>2012-12-31</view>
					</view>
					<view class="star">
						<uni-rate size="15" :value="5" />
					</view>
					<view class="content">
						洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！
					</view>
				</view>
			</view>
		</view>
		<view class="bottom1"></view>
		<view class="btn">
			<view class="btn2"><button>购物车</button><button @click="open">确认已选择服务</button></view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="pop">
				<view class="serviceOrder">
					<text>服务订单</text>
					<image src="/static/错.png"></image>
				</view>
				<view class="serviceOrder2">
					<radio>
						<view class="serviceOrder3"><text>日式水晶打蜡</text><text>￥199</text></view>
					</radio>
				</view>
				<view class="serviceOrder2">
					<radio>
						<view class="serviceOrder3"><text>车身去氧化</text><text>￥199</text></view>
					</radio>
				</view>
				<view class="serviceOrder2">
					<radio>
						<view class="serviceOrder3"><text>车身去氧化</text><text>￥199</text></view>
					</radio>
				</view>
				<view class="btn3">
					<button>合计：￥360</button>
					<button @click="nextPage">确认已选服务</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 0 // 初始化评分为 0
			}
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			turnBack() {
				uni.navigateBack({
					url: "/pages/index/index"
				})
			},
			nextPage() {
				uni.navigateTo({
					url: "/packageMaintenance/pages/confirmOrder/confirmOrder"
				})
			},
			navigation() {
				uni.navigateTo({
					url: "/packageMaintenance/pages/navigation/navigation"
				})
			}
		}
	}
</script>

<style>
	.head {
		position: fixed;
		/* 设置为固定定位 */
		top: 0;
		/* 固定在页面顶部 */
		left: 0;
		/* 从页面左侧开始 */
		width: 100%;
		/* 宽度占满整个页面 */
		z-index: 999;
		/* 设置较高的z-index值，确保显示在其他组件上层 */
	}

	.navigation-bar {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #287BF6;
	}

	.navigation-bar>view>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
	}

	.navigation-bar>text {
		color: #FFF;
		margin-right: 40rpx;
		flex-grow: 1;
		text-align: center;
	}

	.background {
		position: absolute;
		background-color: #287BF6;
		width: 100%;
		height: 300rpx;
	}

	.pictureDisplay {
		position: relative;
		margin: 20rpx;
		margin-top: 150rpx;
		background-color: #FFF;
		border-radius: 10px;
	}

	.pictureDisplay>image {
		width: 670rpx;
		height: 300rpx;
		background-color: #287BF6;
		margin: 20rpx;
		border-radius: 10px;
	}

	.pictureDisplay>view:nth-child(2) {
		margin-left: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.score {
		display: flex;
		margin-left: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.score>text:nth-child(2) {
		margin-left: 20rpx;
		font-size: 25rpx;

	}

	.score>text:nth-child(3) {
		margin-left: 20rpx;
		font-size: 25rpx;
	}

	.pictureDisplay>view:nth-child(4) {
		margin-left: 20rpx;
	}

	.pictureDisplay>view:nth-child(5) {
		display: flex;
		margin-left: 20rpx;
		padding-bottom: 20rpx;
	}

	.pictureDisplay>view>view>image {
		margin-left: 20rpx;
		width: 25rpx;
		height: 25rpx;
	}

	.serviceItems {
		margin: 20rpx;
		background-color: #FFF;
		border-radius: 10px;
	}

	.serviceItems>view:nth-child(1) {
		padding-top: 20rpx;
		margin-left: 20rpx;
		font-weight: bold;
		font-size: 35rpx;
	}

	.project {
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.project>view:nth-child(1) {
		display: flex;
		justify-content: space-between;
	}

	.project2 {
		font-size: 30rpx;
	}

	.money {
		color: #FF7438;
		font-weight: bold;
	}

	.project>view>view>text:nth-child(1) {
		font-size: 25rpx;
		margin-left: 10rpx;
		color: #949494;
	}

	.serviceEvaluation {
		margin: 20rpx;
		background-color: #FFF;
		border-radius: 10px;
	}

	.serviceEvaluation>view:nth-child(1) {
		padding-top: 20rpx;
		margin-left: 20rpx;
		font-weight: bold;
		font-size: 35rpx;
	}

	.evaluate {
		display: flex;
		border-bottom: 1px solid #E8E8E8;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.img>image {
		width: 150rpx;
		height: 150rpx;
		background-color: #287BF6;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 40px;
	}

	.name {
		display: flex;
		justify-content: space-between;
	}

	.star {
		margin: 20rpx 0;
	}

	.content {
		padding-bottom: 20rpx;
		font-size: 25rpx;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.btn2 {
		display: flex;
	}

	.btn2>button:nth-child(1) {
		width: 320rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 40rpx;
		color: #FFF;
		background-color: #287BF6;
		font-size: 28rpx;
	}

	.btn2>button:nth-child(2) {
		width: 320rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 40rpx;
		color: #FFF;
		background-color: #FF7438;
		font-size: 28rpx;
	}

	.serviceOrder {
		margin-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 40rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 5px solid #E8E8E8;
	}

	.serviceOrder>text {
		font-size: 30rpx;
		font-weight: bold;
	}

	.serviceOrder>image {
		width: 20rpx;
		height: 20rpx;
	}

	.serviceOrder2 {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.serviceOrder3 {
		width: 650rpx;
		display: flex;
		justify-content: space-between;
	}

	.btn3 {
		display: flex;
		margin: 20rpx;
	}

	.btn3>button {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFF;
		border-radius: 40rpx;
		font-size: 30rpx;
	}

	.btn3>button:nth-child(1) {
		background-color: #FFB400;
	}

	.btn3>button:nth-child(2) {
		background-color: #FF4000;
	}

	.bottom1 {
		height: 100rpx;
	}
</style>